<template>
  <div>
    <p>
      这有一个4*8的div，请实现下面瀑布流效果，要求：每个div随机颜色，随机高度，宽度25vw。
    </p>
    <p>鼓励使用纯css实现。</p>
    <div v-for="i in new Array(4)" :key="i">
      <div v-for="j in new Array(8)" :key="j">
      </div>
    </div>

    <div>
      <p>目标效果：</p>
      <img src="https://ccbj-demo.oss-cn-beijing.aliyuncs.com/WeChata161da5933ed8d548cf0cac1526c216c.jpg" alt="" />
    </div>
    <div>
      <p>实现效果：</p>
      <div class="container">
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">2</div>
        <div class="box">2</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">3</div>
        <div class="box">3</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">4</div>
        <div class="box">4</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">5</div>
        <div class="box">5</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">6</div>
        <div class="box">6</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">7</div>
        <div class="box">7</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">8</div>
        <div class="box">8</div>
        <div class="box">8</div>
      </div>
    </div>
  </div>
</template>
<script>
window.onload = function () {
  const boxs = document.querySelectorAll('.box');

  // 随机颜色生成函数
  function getRandomColor() {
    return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
  }

  // 随机高度生成函数
  function getRandomHeight(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  // 为每个单元格设置随机高度和背景颜色
  boxs.forEach(cell => {
    cell.style.height = `${getRandomHeight(100, 300)}px`; // 调整min和max以控制最小和最大高度
    cell.style.setProperty('--random-color', getRandomColor());
  });
};
</script>
<style scoped lang="scss">
div {
  text-align: left;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25vw);
  grid-auto-rows: minmax(100px, auto);
  gap: 15px;
}

.box {
  width: 25vw;
  /* 使用CSS变量存储随机颜色 */
  background-color: var(--random-color);
  margin-bottom: 1rem;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}
</style>
